<html lang="en" xmlns:th="http://www.thymeleaf.org">
<script src="js/jquery-3.4.1.js"></script>
<!-- <script src="https://cdn.ckeditor.com/ckeditor5/11.1.1/classic/ckeditor.js"></script> -->
<script src="ckeditor/ckeditor.js"></script>
<link rel="stylesheet" href="css/show.css">

<div class="newblog">
	<form th:action="@{${update != null ? '/updateblog':'/createblog'}}" method="POST" enctype="multipart/form-data" id="form">
		<input th:if="${update != null}" type="text" name="bid" th:value="${update.id}" hidden="hidden"/>
		<!-- newblog-msg -->
		<div class="newblog-msg">
			<div class="newblog-title" th:switch="${update != null}">
				标题：<input th:case="false" type="text" name="title" id="title"/>
				<input th:case="true" type="text" name="title" id="title" th:value="${update.btitle}"/>
			</div>
			<div class="newblog-type">
				分类：	<span><input type="checkbox" name="type" class="check" value="1">前端</span>
						<span><input type="checkbox" name="type" class="check" value="2">后端</span>
						<span><input type="checkbox" name="type" class="check" value="3">软件</span>
						<span><input type="checkbox" name="type" class="check" value="4">碎碎念</span>
			</div>
			<!-- ------图片上传回显------ -->
			<div style="width: 50%;margin-left: 20%;">
				<img src="" alt="" id="pic"/>
			</div>
			<div class="newblog-img">
				图片：<input type="file" name="file" id="file"/>
			</div>
			<!-- newblog-submit -->
			<div th:switch="${update != null}" class="newblog-submit">
				<input th:case="false" type="submit" name="button" value="发布" class="button" onclick="check()"/>
				<input th:case="true" type="submit" name="button" value="提交修改" class="button" onclick="check()"/>
			</div>
		</div>
		<!-- newblog-content -->
		<div class="newblog-content" th:switch="${update != null}">
			<textarea th:case="false" id="editor" name="content"></textarea>
			<textarea th:case="true" id="editor" name="content">[[${update.bcontent}]]</textarea>
		</div>
	</form>
    <script>
		let editor;
		ClassicEditor
			.create( document.querySelector( '#editor' ),{
				toolbar: [ 'heading', 'bold', 'italic', 'bulletedList', 'numberedList', 'undo', 'redo' ]
				} )
			.then( newEditor => {
			editor = newEditor;
			} )
				.catch( error => {
			console.error( error );
			} );
    </script>
	<script>
		//获取打印editor中的内容
		function check(){
			console.log(editor.getData());
			return false;
		}
		//图片上传回显
		$("#file").change(function() {
            var file = this.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e) {
                console.log(this.result);
                $("#pic").attr("src", this.result).show();//选择img的ID，给src赋值
				$("#pic").css("display","table-cell");	//显示图片
            };
        });
	</script>
	<script>

		//提交前校验表单
		$("#form").submit(function () {
			if ($(".button").val() == "提交修改"){
				return true;
			}
			return submit();
		});
		function submit(){
			var title = $("#title").val();
			var content = editor.getData();
			var fileInput = $("#file").get(0).files[0];
			if (title == "" || title == null || content == ""  || content == null || !fileInput){
				return false;
			}else{
				$(".check").each(
						function(){
							if($(this).attr("checked")){
								return true;
							}
						});
				return false;
			}
		}
	</script>
</div>
</html>